<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <ui:composition>
        <h:form id="loginForm">
            <p:commandLink action="main?faces-redirect=true" ajax="false">
                <h:outputText class="logo" value="Tiendalia"/>
            </p:commandLink>

            <div id="infoLogin" class="infoLogin">

                <p:outputPanel id="loginPanel" rendered="#{empty sessionScope.user}">
                    <p:commandLink action="search?faces-redirect=true" ajax="false">
                        <p:graphicImage styleClass="imgBtn" url="resources/images/advsearch.png" height="40px" alt="Búsqueda avanzada" title="Búsqueda avanzada" />
                    </p:commandLink>
                    <p:commandLink id="loginBtn">
                        <p:graphicImage styleClass="imgBtn" url="resources/images/login.png" alt="¡Pasa, estamos abiertos!" title="¡Pasa, estamos abiertos!"
                                        onclick="loginPnl.show();"/>
                    </p:commandLink>
                    <p:panel id="loginFormPanel" styleClass="loginPanel" widgetVar="loginPnl" visible="false">
                        <h:panelGrid columns="3">
                            <p:inputText id="email" value="#{loginBean.user.email}" required="true">
                                <p:watermark for="email" value="E-mail"/>
                            </p:inputText>
                            <p:password id="password" value="#{loginBean.user.password}" required="true">
                                <p:watermark for="password" value="Contraseña"/>
                            </p:password>
                            <p:commandButton value="Login" ajax="false" action="#{loginBean.login()}" />
                            <p:commandLink value="¿Aún no tienes cuenta?" onclick="registerDlg.show();"/>
                        </h:panelGrid>
                    </p:panel>
                </p:outputPanel>

                <p:outputPanel id="loggedInPanel" rendered="#{!empty sessionScope.user}">
                    <p:outputPanel id="cartPanel" styleClass="cartPanel" rendered="#{not empty cartBean.cartProducts}">
                        <h:outputText value="Confirma tu compra cuando acabes" />
                        <p:commandLink action="cart.xhtml?faces-redirect=true" ajax="false">
                            <p:graphicImage styleClass="cartBtn" url="resources/images/ok.png" height="40px" alt="Mi carro de la compra" title="Mi carro de la compra" />
                        </p:commandLink>
                    </p:outputPanel>
                    <p:commandLink action="search?faces-redirect=true" ajax="false">
                        <p:graphicImage styleClass="imgBtn" url="resources/images/advsearch.png" height="40px" alt="Búsqueda avanzada" title="Búsqueda avanzada" />
                    </p:commandLink>
                    <p:commandLink action="user.xhtml?faces-redirect=true" ajax="false" rendered="#{not empty sessionScope.user}">
                        <p:graphicImage styleClass="imgBtn" url="resources/images/user.png" height="40px" alt="Panel Usuario" title="Panel Usuario" />
                    </p:commandLink>
                    <p:commandLink action="admProducts.xhtml?faces-redirect=true" ajax="false" rendered="#{sessionScope.user.isAdmin > 0}">
                        <p:graphicImage styleClass="imgBtn" url="resources/images/admin.png" height="40px" alt="Panel Administración" title="Panel Administración" />
                    </p:commandLink>
                    <p:commandLink action="#{loginBean.logout}" ajax="false" rendered="#{!empty sessionScope.user}">
                        <p:graphicImage styleClass="imgBtn" url="resources/images/logout.png" height="40px" alt="Log out" title="Log out" />
                    </p:commandLink>
                </p:outputPanel>
            </div>
        </h:form>

        <h:form id="registerForm" styleClass="#{not empty sessionScope.user?'displayNone':'a'}">
            <p:dialog styleClass="registerDialog" widgetVar="registerDlg" resizable="false"
                      modal="true" header="Regístrate" showEffect="puff" hideEffect="puff" >
                <p:messages id="messages" autoUpdate="true"/>
                <p:panelGrid id="registerPanel" columns="3" columnClasses="titles" styleClass="noBorder">

                    <p:outputLabel for="nameRegister" value="Nombre: " />
                    <p:inputText id="nameRegister" required="true" value="#{registerBean.user.firstname}"/>
                    <p:message for="nameRegister" />

                    <p:outputLabel for="lastNameRegister" value="Apellidos: " />
                    <p:inputText id="lastNameRegister" required="true" value="#{registerBean.user.lastname}"/>
                    <p:message for="lastNameRegister" />

                    <p:outputLabel for="emailRegister" value="E-mail: " />
                    <p:inputText id="emailRegister" required="true" validatorMessage="El email no está bien formado" value="#{registerBean.user.email}">
                        <f:validateRegex pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
                    </p:inputText>
                    <p:message for="emailRegister" />

                    <p:outputLabel for="passwordRegister" value="Contraseña: " />
                    <p:password id="passwordRegister" value="#{registerBean.user.password}" match="password2" label="Password"
                                weakLabel="Débil" validatorMessage="Las contraseñas no coinciden" required="true" feedback="true"
                                strongLabel="Excelente" goodLabel="Buena" promptLabel="Introduce tu contraseña"/>
                    <p:message for="passwordRegister" />

                    <p:outputLabel for="password2" value="Repite contraseña: " />
                    <p:password id="password2" value="#{registerBean.user.password}" label="Password 2" required="true"
                                validatorMessage="La contraseña debe tener 6 caracteres o más" >
                        <f:validateLength minimum="6" for="password2"/>
                    </p:password>
                    <p:message for="password2" />
                </p:panelGrid>
                <p:commandButton value="Ya está" action="#{registerBean.register}" styleClass="registerBtn" update="registerPanel"  />
            </p:dialog>
        </h:form>
        <h:form id="searchForm" >
            <div class="searchDivContainer">
                <div class="searchDiv">
                    <p:autoComplete id="searchInput" value="#{searchBean.input}" completeMethod="#{searchBean.complete}" itemValue="#{searchBean.product}"/>
                    <p:watermark value="Busca aquí tu producto" for="searchInput" />
                    <p:commandLink id="doSearchCmd" action="#{searchBean.goToProduct}" title="Escribe el nombre de un producto para buscar">
                        <p:graphicImage  url="resources/images/search.png" alt="Búsqueda" title="Búsqueda"/>
                        <f:viewParam name="product" value="#{searchBean.product.id}" />
                    </p:commandLink>
                    <p:defaultCommand target="doSearchCmd" />
                </div>
            </div>
        </h:form>
    </ui:composition>
</html>

